<template>
  <el-dialog :visible.sync="dialogShow"
             :before-close="onClose"
             destroy-on-close
             title="请先登录"
             center
             width="30%"
  >
    <el-form @submit.native.prevent :model="loginForm" :rules="rules" ref="loginForm" label-width="0">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" prefix-icon="el-icon-user" clearable placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" clearable show-password
                  @keypress.enter.native="submitForm('loginForm')"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">登陆</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import login from "@/views/home/api/login";

export default {
  name: "LoginModal",
  props: {
    dialogShow: Boolean
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: '账号不能为空', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
        ]
      },
    }
  },
  methods: {
    onClose() {
      this.$emit('onClose');
    },
    async submitForm() {
      let response = await login(this.loginForm);
      if (response.success) {
        window.localStorage.setItem("token", response.data);
        this.onClose();
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>